<template>
    <div class="page-body">
        <div class="container">
            <div class="date-class" style="background: white">
                <div class="title-class">2026年春节倒计时</div>
                {{ timeSpace.day }}
                <span class="date_unit">天</span>
                {{ timeSpace.hour }}
                <span class="date_unit">时</span>
                {{ timeSpace.minute }}
                <span class="date_unit">分</span>
                {{ timeSpace.second }}
                <span class="date_unit">秒</span>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import {type BasicEntity} from "@utils/entity";
import defineGlobalStance from "@utils/global-property";
import {ref} from "vue";

let {globalConfig} = defineGlobalStance()
let endDate = Date.parse("2026-02-17 00:00:00")
let curDate = new Date()
let timeSpace = ref<BasicEntity>({})
timeSpace.value = globalConfig.$numTool.calcDateSpaceWithObj(endDate - curDate.getTime())
setInterval(() => {
    let curDate = new Date()
    timeSpace.value = globalConfig.$numTool.calcDateSpaceWithObj(endDate - curDate.getTime())
}, 1000)
</script>

<style scoped lang="scss">
.page-body {
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: white;


    .container {
        background: url("../../../assets/ec5d2f7492054c46a9cf9e7cd32ee42d_th.gif");
    }

    .date-class {
        font-size: 90px;
        font-weight: bold;
        mix-blend-mode: screen;

        .title-class {
            font-size: 60px;
            font-weight: bold;
            padding-top: 40px;
            text-align: center;
        }

        .date_unit {
            font-size: 20px;
            font-weight: bold;
        }

        &:hover {
        }
    }
}
</style>